<template>
  <div class="tab-container">
    <div ref="listTabScroll" style="width: 100%;">
      <div ref="navRef" class="table-list-tabs-content-nav">
        <slot />
      </div>
    </div>
    <div style="flex:1;"/>
    <div class="down-container" @click="showAll">
      <i class="el-icon-arrow-down"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navOffset: 0,
      scrollable: false
    };
  },
  // updated() {
  //   this.update();
  // },
  // mounted() {
  //   window.addEventListener('resize', this.update);
  // },
  // beforeDestroy() {
  //   window.removeEventListener('resize', this.update);
  // },
  methods: {
    update() {
      const containerSize = this.$refs.listTabScroll['offsetWidth'];
      const navSize = this.$refs.navRef['offsetWidth'];
      if (containerSize < navSize) {
        this.scrollable = true;
      } else {
        this.scrollable = false;
      }
    },
    showAll() {
      this.$emit('showAll');
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-container {
  width: 100%;
  // overflow: hidden;
  white-space: nowrap;
  position: relative;
  transition: transform .3s;
  display: flex;
}
.table-list-tabs-content-nav {
  white-space: nowrap;
  position: relative;
  transition: transform .3s;
  display: flex;
  width: 100%;
}
.down-container {
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  padding: 0 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}
</style>
